<template>
  <div class="Home">
    <h1>Home</h1>
    <h1>{{msg}}</h1>
    <h1>{{reversedMsg}}</h1>
		<!-- <h1>{{ $store.state.count }}</h1> -->
		<h1>{{ count }}</h1>
		<!-- <h1>{{ $store.getters.count100 }}</h1> -->
		<h1>getters: {{ count100 }}</h1>
		<h1>getters: {{ copyCount100 }}</h1>
		<button @click="add">count++</button>
		<br>
		<!-- <button @click="$store.state.count++">count++</button> -->
		<h1>{{ tabbar }}</h1>
    <ul>
      <li
        v-for="item of 3"
        :key="item"
      >
<!--        <router-link :to="`/user/${item}`">to User {{ item }}</router-link>-->
        <router-link
          :to="{ name: 'User', params: { id: item } }">
          to User, {{ item }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex"
	
export default {
  name: "Home",
	props: ["tabbar"],
	/*computed: {
		count() {
			return this.$store.state.count
		},
	},
	computed: mapState({ // 传对象可以重命名
		// count: state => state.count
		count: "count"
	}),
	computed: mapState(["count"]), // 更简化
	*/
	computed: {
		...mapState(["count"]),
		...mapState({ count1: "count" }),
		...mapGetters([ "count100" ]),
		...mapGetters({ copyCount100: "count100" }),
		reversedMsg() {
			return this.msg.split("").reverse().join("")
		}
	},
	data() {
		return {
			msg: "Hello Vuex!!!"
		}
	},
  created() {
    // console.log(this.$store.state.count)
  },
	methods: {
		...mapMutations(["ADD_N"]),
		add() {
			this.ADD_N(13)
			// this.$store.commit('increment')
			// this.$store.commit('addN', 3)
			// this.$store.commit({
			// 	type: "ADD_N",
			// 	n: 13
			// })
		}
	}
}
</script>
